<template>
  <common-info-dialog
    :visible.sync="drillDetailShow"
    @cancel="close"
    :infoLoading="infoLoading"
    :title="dialogTitle"
    width="65%"
  >
    <div class="drill-table-list">
      <common-list>
        <common-search slot="search" @search="handleQuery" @reset="resetQuery">
          <el-form
            @submit.native.prevent
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            @enter="handleQuery"
            label-width="75px"
          >
            <el-form-item
              label="合作方账号"
              prop="alarmContent"
              v-if="drillObj.type === 'PARTNERS'"
            >
              <common-input
                v-model="queryParams.alarmContent"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item
              :label="
                drillObj.type === 'PARTNERS' || drillObj.type === 'CROSSBORDER'
                  ? 'IP'
                  : '源IP'
              "
              prop="sourceIp"
              label-width="40px"
              v-if="drillObj.type !== 'ACCESSSOURCE'"
            >
              <common-input
                v-model="queryParams.sourceIp"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item label="告警时间" v-if="drillObj.type !== 'SEVENDAY'">
              <el-date-picker
                v-model="date"
                type="datetimerange"
                @change="dateChange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item label="告警时间" v-if="drillObj.type === 'SEVENDAY'">
              <el-time-picker
                is-range
                v-model="timeValue"
                range-separator="至"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
                style="width: 80%"
                :clearable="false"
                :editable="false"
                @change="timeChange"
              >
              </el-time-picker>
            </el-form-item>
          </el-form>
        </common-search>

        <common-table
          v-loading="loading"
          slot="content"
          :data="tableList"
          :height="'345px'"
        >
          <el-table-column
            label="合作方账号"
            align="left"
            prop="cooperationAccount"
            width="200"
            v-if="drillObj.type === 'PARTNERS'"
            show-overflow-tooltip
          />
          <el-table-column
            label="IP"
            align="left"
            prop="sourceIp"
            width="200"
            v-if="
              drillObj.type === 'PARTNERS' || drillObj.type === 'CROSSBORDER'
            "
            show-overflow-tooltip
          />

          <el-table-column
            label="规则名称"
            align="left"
            prop="ruleName"
            width="200"
            v-if="
              drillObj.type !== 'PARTNERS' && drillObj.type !== 'CROSSBORDER'
            "
            show-overflow-tooltip
          />
          <el-table-column
            label="源IP"
            align="left"
            prop="sourceIp"
            v-if="
              drillObj.type !== 'ACCESSSOURCE' &&
              drillObj.type !== 'PARTNERS' &&
              drillObj.type !== 'CROSSBORDER'
            "
            width="180"
            show-overflow-tooltip
          />

          <el-table-column
            label="告警描述"
            align="left"
            prop="alarmContent"
            show-overflow-tooltip
          />

          <el-table-column
            show-overflow-tooltip
            label="告警时间"
            align="left"
            prop="alarmTime"
            width="160"
          >
            <template slot-scope="{ row }"
              >{{ parseTime(new Date(row.alarmTime)) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" width="60px">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDetail(scope.row)"
                >详情
              </el-button>
            </template>
          </el-table-column>
        </common-table>

        <pagination
          slot="pagination"
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <alarm-detail
          v-if="alarmDetailShow"
          @close="alarmDetailShow = false"
          :targetIp="targetIp"
          :detail="detailForm"
        ></alarm-detail>
      </common-list>
    </div>
  </common-info-dialog>
</template>

<script>
import AlarmDetail from "./alarmDetail";
import { alarmInfo_list } from "@/api/alarmCenter/index";
export default {
  props: {
    currentType: {
      type: String,
      default: "",
    },
    drillObj: {
      type: Object,
      default: () => {},
    },
    drillDetailShow: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    AlarmDetail,
  },
  data() {
    return {
      detail: {},
      results: [],
      infoLoading: false,

      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      tableList: [],
      loading: false,
      dialogTitle: "",
      date: [],
      targetIp: {},
      detailForm: {},
      alarmDetailShow: false,
      total: 0,
      timeValue: [
        new Date(new Date().toLocaleDateString()),
        new Date(
          new Date(new Date().toLocaleDateString()).getTime() +
            24 * 60 * 60 * 1000 -
            1000
        ),
      ],
    };
  },
  computed: {},
  created() {
    this.initQueryParam();

    if (this.drillObj.type === "SEVENDAY") {
      this.queryParams.beginTime = this.drillObj.title + " 00:00:00";
      this.queryParams.endTime = this.drillObj.title + " 23:59:59";
    }

    this.dialogTitle = this.drillObj.title + "详情";
    this.getList();
  },
  methods: {
    initQueryParam() {
      //业务系统告警
      if (this.drillObj.type === "BUSINESS") {
        this.queryParams.businessName = this.drillObj.title;
      }

      //OWASP
      if (this.drillObj.type === "OWASP") {
        this.queryParams.alarmCode = "0X00020018";
        this.queryParams.alarmContent = this.drillObj.title;
      }

      //特权账号
      if (this.drillObj.type === "PRIVILEGED") {
        this.queryParams.alarmCode = "0X00020022";
      }
      // 合作方
      if (this.drillObj.type === "PARTNERS") {
        this.queryParams.alarmCode = "0X00020024";
        // this.queryParams.alarmContent = this.drillObj.title;
      }
      // 跨境行为
      if (this.drillObj.type === "CROSSBORDER") {
        this.queryParams.alarmCode = "0X00020025";
      }

      // 四种 异常
      //访问量异常
      if (this.drillObj.type === "ABNORMAL1") {
        this.queryParams.ruleName = "访问量基线规则";
        this.queryParams.ruleNameTo = "接口访问频次异常";
        // this.queryParams.alarmCode = "0X00020001";
        // this.queryParams.alarmCodeTo = "0X00020023";
      }
      //流量异常
      if (this.drillObj.type === "ABNORMAL2") {
        this.queryParams.ruleName = "流量基线规则";
        this.queryParams.ruleNameTo = "接口流量异常监测";
        // this.queryParams.alarmCode = "0X00020001";
        // this.queryParams.alarmCodeTo = "0X00020020";
      }
      //数据包异常
      if (this.drillObj.type === "ABNORMAL3") {
        this.queryParams.ruleName = "数据包基线规则";
        this.queryParams.alarmCode = "0X00020001";
      }
      //时间异常
      if (this.drillObj.type === "ABNORMAL4") {
        this.queryParams.ruleName = "访问时间基线规则";
        this.queryParams.alarmCode = "0X00020001";
      }

      // 脆弱性
      if (this.drillObj.type === "VULNERABILITY") {
        this.queryParams.alarmCode = "0X00020017";
        this.queryParams.alarmContent = this.drillObj.title;
      }

      // 接口监测事件分布
      if (this.drillObj.type === "EVENT") {
        this.queryParams.manuCode = "0X00";
        this.queryParams.systemCode = "0X02";
        this.queryParams.ruleName = this.drillObj.title;
      }

      // 接口监测告警访问源
      if (this.drillObj.type === "ACCESSSOURCE") {
        this.queryParams.manuCode = "0X00";
        this.queryParams.systemCode = "0X02";
        this.queryParams.sourceIp = this.drillObj.title;
      }

      // 接口监测近7日告警
      if (this.drillObj.type === "SEVENDAY") {
        this.queryParams.manuCode = "0X00";
        this.queryParams.systemCode = "0X02";
      }
    },
    /**
     * 关闭
     */
    close() {
      this.$emit("close");
    },

    getList() {
      this.loading = true;
      alarmInfo_list(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            this.tableList = res.rows;
            this.total = res.total;
          } else {
            this.tableList = [];
            this.total = 0;
          }
        })
        .catch(() => {
          this.tableList = [];
          this.total = 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleDetail(row) {
      this.alarmDetailShow = true;
      this.targetIp = { targetIp: row.targetIp, sourceIp: row.sourceIp };
      this.detailForm = row;
    },

    dateChange() {
      let endTime = null,
        beginTime = null;
      if (this.date && this.date.length > 0) {
        beginTime = this.date[0];
        endTime = this.date[1];
      }
      this.queryParams.beginTime = beginTime || null;
      this.queryParams.endTime = endTime || null;
    },

    timeChange() {
      let endTime = null,
        beginTime = null;
      if (this.timeValue && this.timeValue.length > 0) {
        beginTime = this.timeValue[0];
        endTime = this.timeValue[1];
      }
      this.queryParams.beginTime =
        this.drillObj.title + " " + beginTime || null;
      this.queryParams.endTime = this.drillObj.title + " " + endTime || null;
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.initQueryParam();
      this.getList();
    },
    resetQuery() {
      this.date = [];
      this.timeValue = [
        new Date(new Date().toLocaleDateString()),
        new Date(
          new Date(new Date().toLocaleDateString()).getTime() +
            24 * 60 * 60 * 1000 -
            1000
        ),
      ];
      this.queryParams = this.$options.data().queryParams;

      if (this.drillObj.type === "SEVENDAY") {
        this.queryParams.beginTime = this.drillObj.title + " 00:00:00";
        this.queryParams.endTime = this.drillObj.title + " 23:59:59";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .global-common-info-dialog-body {
  overflow: auto;
}

::v-deep .common-search-wrap .common-search-layout {
  width: calc(100% - 30px);
}
// ::v-deep .global-base-list-container .content-container {
//   max-height: 380px;
//   overflow: auto;
// }
.drill-table-list {
  padding: 0 18px;
  margin-bottom: 18px;
}
</style>
